@charset "utf-8";

@import "reset";
$fontsize:40;
@function r($px) {
    @return$px/$fontsize *1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    width: 100%;
    height: r(97);
    font-size: r(40);
    background: black;
    position: absolute;
    top: 0;
    .header_a {
        width: r(672);
        margin: 0 auto;
    }
    .jt {
        width: r(20);
        height: r(34);
        margin-top: r(34);
        img {
            width: 100%;
        }
    }
    .ss {
        width: r(35);
        height: r(35);
        margin-top: r(34);
        img {
            width: 100%;
        }
    }
    .logo {
        width: r(66);
        height: r(92);
        margin: 0 auto;
        padding-top: r(10);
        img {
            width: 100%;
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(97);
    bottom: r(97);
    overflow-y: scroll;
    .cent {
        width: r(660);
        margin: 0 auto;
        line-height: r(100);
        p {
            font-size: r(26);
            color: #656b6f;
            span {
                float: right;
                font-size: r(16);
            }
            &:before {
                content: "";
                display: inline-block;
                width: r(17);
                height: r(17);
                -webkit-border-radius: 100%;
                background: #e855bd;
                margin-right: r(16);
            }
        }
    }
    .tup{
        width: 100%;
        img{
            width: 100%;
        }
    }
    .wenzi{
        width: r(660);
        margin: 0 auto;
        h4{
            font-size: r(60);
            margin-top:r(48);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:normal;
            display: -webkit-box;
            -webkit-line-clamp:2 ;
            -webkit-box-orient: vertical;
        }
        p{
            color: #777777;
            font-size: r(35);
            margin-top: r(44);
            padding-right: r(30);
            margin-bottom: r(128);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space:normal;
            display: -webkit-box;
            -webkit-line-clamp:4 ;
            -webkit-box-orient: vertical;
        }
    }
    .wenz{
        width: r(660);
        margin: 0 auto;
        margin-bottom: r(56);
        p{
            display: inline-block;
            margin-right: r(208);
            font-size: r(18);
            color: #72777a;
            span{
                font-size: r(20);
                margin-left: r(25);
            }
        }
        p:nth-child(2){
           margin: 0;
            }
    }
}

footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    border-top: r(1) solid #dddddd;
    ul {
        width: r(672);
        margin: 0 auto;
        line-height: r(90);
        li {
            display: inline-block;
            margin-right: r(110);
        }
        .iconfont {
            font-size: r(42);
            color: transparent;
            -webkit-text-stroke: 1px #c9c9c9;
        }
        li.active .iconfont {
            -webkit-text-stroke: 2px #f8df63;
        }
    }
}

li:nth-child(4) {
    margin: 0;
    a {
        color: #bcbebf;
        font-size: r(20);
    }
}